將 ActionBar 拿掉 設置 toolbar

預設App 都會有 ActionBar

我們可以透過下列方法把 ActionBar 拿掉

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        

我們可以直接將 application 的 theme , 改成 NoActionBar style

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.AppCompat.Light.NoActionBar">

或者是將 style xml 的 AppTheme , 改成 NoActionBar style

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

設置 Toolbar

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="1dp"
        android:layout_marginLeft="1dp"
        android:background="@color/colorAccent"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navigationIcon="?attr/actionModeCloseDrawable"
        app:subtitle="subTitle"
        app:title="Title" />

其中

設置 Navigation icon 是這一行 , Navigation icon 通常用來導引回上一頁

app:navigationIcon="?attr/actionModeCloseDrawable" 

設置 title / subtitle 文字 是這一行

        app:subtitle="subTitle"
        app:title="Title" 

如果想把 title subtitle 移中間一點 可以透過設置 margin 的方式來實現

app:titleMarginStart="100dp" 

menu

添加 menu Item

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:title="Item" />
    <item android:title="Item" />
</menu>

設置 showAsAction

ifRoom：如果 toolbar 上有位置才顯示，不然會在三個點點擊之後才出現

never：不顯示在界面上，只在三個點點擊之後才出現

always：會顯示在 toolbar 上

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:title="Item"
        app:showAsAction="always|never" />
    <item
        android:title="Item"
        app:showAsAction="ifRoom" />
    <item
        android:title="Item"
        app:showAsAction="never" />
</menu>

在 toolbar 設置 添加的menu

    <androidx.appcompat.widget.Toolbar
        ...
        app:menu="@menu/menu"
        ... />

menuItem click

在 Android 中 如果需要在程式碼中呼叫 UI 元件 皆需要有id

設置 menuItem 的 Id

<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_always"
        android:title="Item"
        app:showAsAction="always|never" />
    <item
        android:id="@+id/item_ifroom"
        android:title="Item"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/item_never"
        android:title="Item"
        app:showAsAction="never" />
</menu>

toolbar 也要有 id

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
          ..... />

在程式碼中設置 menuItem click Listener

       toolbar.setOnMenuItemClickListener(
       object : androidx.appcompat.widget.Toolbar.OnMenuItemClickListener {

           override fun onMenuItemClick(item: MenuItem?): Boolean {

              val menuItemId = item!!.itemId

                when(menuItemId){

                    R.id.item_always ->{
                        
                        
                    }

                    R.id.item_ifroom->{
                        
                        
                    }

                    R.id.item_never ->{
                        
                        
                    }
                }


               return true

           }

       })

NavigationIcon click

在程式碼中設置 NavigationIcon click Listener

        toolbar.setNavigationOnClickListener { 
            
            
            
            
        }